/* 全局样式变量 */
:root {
  /* Apple风格颜色变量 - 主色系 */
  --el-color-primary: #5e5ce6;     /* 紫色 - 主色调 */
  --el-color-success: #34c759;     /* 绿色 */
  --el-color-warning: #ff9f0a;     /* 橙色 */
  --el-color-danger: #ff375f;      /* 红色 */
  --el-color-info: #8e8e93;        /* 灰色 */
  
  /* 辅助颜色 - 增加对比度 */
  --color-accent-1: #007aff;       /* 蓝色 - 辅助色1 */
  --color-accent-2: #af52de;       /* 紫罗兰 - 辅助色2 */
  --color-accent-3: #5ac8fa;       /* 浅蓝色 - 辅助色3 */
  --color-accent-4: #ffcc00;       /* 黄色 - 辅助色4 */
  
  /* 强调色 - 增强视觉层次 */
  --color-highlight: #ff3b30;      /* 高亮红 - 强调色 */
  --color-gradient-1: linear-gradient(135deg, #5e5ce6, #007aff); /* 紫蓝渐变 */
  --color-gradient-2: linear-gradient(135deg, #ff375f, #ff9f0a); /* 红橙渐变 */
  
  /* 文本颜色 */
  --el-text-color-primary: #1d1d1f;
  --el-text-color-regular: #424245;
  --el-text-color-secondary: #86868b;
  
  /* 背景色和边框色 - 调整增加对比度 */
  --el-border-color: rgba(0, 0, 0, 0.1);
  --el-border-color-light: rgba(0, 0, 0, 0.05);
  --el-border-color-lighter: rgba(0, 0, 0, 0.03);
  --el-border-color-extra-light: rgba(0, 0, 0, 0.02);
  --el-bg-color: #FFFFFF;
  --el-bg-color-page: #f5f5f7;     /* Apple 背景色 */
  --el-fill-color-blank: #FFFFFF;

  /* 自定义变量映射 */
  --primary-color: var(--el-color-primary);
  --primary-light: rgba(94, 92, 230, 0.1);
  --success-color: var(--el-color-success);
  --warning-color: var(--el-color-warning);
  --danger-color: var(--el-color-danger);
  --info-color: var(--el-color-info);
  
  /* Your Custom Variables - Adjusted */
  --text-primary: var(--el-text-color-primary);
  --text-regular: var(--el-text-color-regular);
  --text-secondary: var(--el-text-color-secondary);
  --border-color: var(--el-border-color);
  --border-light: var(--el-border-color-light);
  --background-color: var(--el-bg-color-page);
  --card-background: #fbfbfd;  /* 修改为更亮的背景色，提高对比度 */
  --header-height: 60px;

  /* Refined Shadows - Apple风格阴影 */
  --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Smoother Transition - Apple风格过渡 */
  --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* 侧边栏颜色 - 改为Apple风格 */
  --sidebar-bg: rgba(255, 255, 255, 0.9);
  --sidebar-text: #1d1d1f;
  --sidebar-active: #5e5ce6;
  --sidebar-hover: rgba(0, 0, 0, 0.03);

  /* 圆角 - Apple风格圆角 */
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 20px;  /* 增大圆角 */
}

/* 全局基础样式 */
body {
  margin: 0;
  /* Modern Font Stack - Prioritize system fonts */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: var(--text-primary);
  background-color: var(--background-color);
  line-height: 1.6;
}

/* 页面容器通用样式 */
.page-container {
  padding: 24px; /* 稍微增加内边距 */
  background-color: var(--card-background);
  border-radius: var(--radius-large); /* 使用大圆角 */
  box-shadow: var(--shadow-base);
  margin-bottom: 24px;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none; /* 移除边框 */
}

.page-container:hover {
  box-shadow: var(--shadow-medium);
}

/* 页面标题样式 */
.page-title {
  font-size: 32px; /* 增大标题字体 */
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 24px;
  padding-left: 0;
  line-height: 1.2;
  letter-spacing: -0.5px; /* 添加字间距 */
}

/* 操作栏样式 */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

/* 搜索区域样式 */
.search-area {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
  background-color: var(--card-background);
  padding: 20px 24px;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-base);
  border: none; /* 移除边框 */
}

/* 表格卡片样式 */
.table-card {
  background-color: var(--card-background);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-base);
  margin-bottom: 24px;
  padding: 0;
  overflow: hidden;
  border: none; /* 移除边框 */
}

/* 表格样式优化 */
.el-table {
  --el-table-border-color: var(--el-border-color-lighter);
  --el-table-header-bg-color: var(--el-bg-color-page); /* Use page background for header */
  --el-table-row-hover-bg-color: rgba(0, 0, 0, 0.02);
  --el-table-header-text-color: var(--text-regular);
  border-radius: var(--radius-medium);
  overflow: hidden;
  background: transparent; /* 表格背景透明 */
}

.el-table th {
  font-weight: 600; /* 加粗表头 */
  color: var(--text-primary);
  background: #f5f5f7; /* 表头背景色 */
}

.el-table td {
  color: var(--text-primary); /* 加深表格内容颜色 */
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding: 16px 24px;
  background-color: var(--card-background);
  border-radius: var(--radius-large);
  border-top: 1px solid var(--el-border-color-lighter);
}

/* 表单样式 */
.form-card {
  background-color: var(--card-background);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-base);
  padding: 24px;
  margin-bottom: 24px;
  border: none; /* 移除边框 */
}

.el-form-item__label {
  color: var(--text-regular);
  font-weight: 500;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  gap: 12px;
}

/* 表格行交替颜色 */
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: rgba(94, 92, 230, 0.02) !important;
}

/* 表格行悬停效果 */
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* 更新表格活跃行 */
.el-table__row.current-row > td {
  background-color: rgba(94, 92, 230, 0.1) !important;
}

/* 卡片标题样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 600;
  font-size: 20px;
  color: var(--text-primary);
}

.card-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
}

/* 提示文字样式 */
.tip-text {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.4;
}

/* 按钮样式增强 */
.el-button {
  font-weight: 500;
  border-radius: var(--radius-small);
  transition: var(--transition-base);
  /* Remove custom shadow */
  box-shadow: none;
}

/* 主要按钮样式 */
.el-button--primary:not(.is-text):not(.is-link):not(.is-plain) {
  background-color: #5e5ce6 !important;
  border-color: #5e5ce6 !important;
  color: #ffffff !important; /* 确保主要按钮文字为白色 */
}
.el-button--primary:not(.is-text):not(.is-link):not(.is-plain):hover {
  background-color: #6b69e3 !important;
  border-color: #6b69e3 !important;
  color: #ffffff !important;
}

/* 成功按钮样式 */
.el-button--success:not(.is-text):not(.is-link):not(.is-plain) {
  background-color: #34c759 !important;
  border-color: #34c759 !important;
  color: #ffffff !important; /* 确保成功按钮文字为白色 */
}
.el-button--success:not(.is-text):not(.is-link):not(.is-plain):hover {
  background-color: #30d158 !important;
  border-color: #30d158 !important;
  color: #ffffff !important;
}

/* 危险按钮样式 */
.el-button--danger:not(.is-text):not(.is-link):not(.is-plain) {
  background-color: #ff375f !important;
  border-color: #ff375f !important;
  color: #ffffff !important; /* 确保危险按钮文字为白色 */
}
.el-button--danger:not(.is-text):not(.is-link):not(.is-plain):hover {
  background-color: #ff4b6e !important;
  border-color: #ff4b6e !important;
  color: #ffffff !important;
}

/* 警告按钮样式 */
.el-button--warning:not(.is-text):not(.is-link):not(.is-plain) {
  background-color: #ff9f0a !important;
  border-color: #ff9f0a !important;
  color: #ffffff !important; /* 确保警告按钮文字为白色 */
}
.el-button--warning:not(.is-text):not(.is-link):not(.is-plain):hover {
  background-color: #ffad26 !important;
  border-color: #ffad26 !important;
  color: #ffffff !important;
}

/* 分页活跃页码按钮 */
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  background-color: #5e5ce6 !important;
  color: #fff !important;
}

/* 操作按钮图标与文字的间距 */
.el-button [class*=el-icon] + span {
  margin-left: 6px;
}

/* 表单项提示文字 */
.form-tip {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.4;
}

/* 数据为空的提示样式 */
.el-empty {
  padding: 40px 0;
}

/* 状态标签样式 */
.status-tag {
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--el-border-color); /* Use El border color */
  border-radius: 3px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-track {
  background: transparent; /* Transparent track */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--el-text-color-secondary); /* Darker on hover */
}

/* Add global focus ring style for accessibility */
*:focus-visible {
  outline: 2px solid var(--el-color-primary-light-3);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

/* Links */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--el-color-primary-light-3);
  text-decoration: underline;
}

/* 对话框样式 */
.el-dialog {
  border-radius: 20px;
  overflow: hidden;
}

.el-dialog__header {
  margin: 0;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
}

.el-dialog__body {
  padding: 24px;
}

.el-dialog__footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* 输入框样式优化 */
.el-input__wrapper,
.el-select .el-input__wrapper {
  background: rgba(0, 0, 0, 0.03);
  border: none;
  box-shadow: none !important;
  border-radius: 10px;
}

.el-input__wrapper:hover,
.el-select .el-input__wrapper:hover {
  background: rgba(0, 0, 0, 0.05);
}

.el-input__inner {
  color: #1d1d1f;
}

/* 空状态样式 */
.empty-data {
  padding: 40px;
  text-align: center;
}

.empty-description {
  color: #86868b;
  margin: 8px 0 16px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .page-title {
    font-size: 28px;
    margin-bottom: 20px;
  }
  
  .page-container {
    padding: 20px;
  }
  
  .search-area {
    padding: 16px;
  }
} 